<template>
  <a href="#" @click="handleDrawer">
    <el-icon color="black" size="15">
      <Setting />
    </el-icon>
  </a>
  <el-drawer v-model="dialog" title="系统设置" direction="rtl" size="20%" :show-close="false">
    <!-- 表单元素 -->
    <el-form>
      <el-form-item label="主题颜色">
        <el-color-picker @change="setColor" v-model="color" show-alpha :teleported="false" />
      </el-form-item>
      <el-form-item label="暗黑模式">
        <el-switch @change="changeDark" v-model="dark" size="small" inline-prompt class="ml-2"
          :active-icon="MoonNight" :inactive-icon="Sunny" />
      </el-form-item>
    </el-form>
    <template #reference>
      <el-button class="m-2"><el-icon-setting></el-icon-setting></el-button>
    </template>
  </el-drawer>
</template>
<script lang="ts" setup>
import { MoonNight, Sunny } from '@element-plus/icons-vue'
import { ref } from 'vue';

let dialog = ref(false)

const dark = ref<boolean>(true)

// 颜色组件的数据
const color = ref('rgba(255, 69, 0, 0.68)')
const predefineColors = ref([
  '#ff4500',
  '#ff8c00',
  '#ffd700',
  '#90ee90',
  '#00ced1',
  '#1e90ff',
  '#c71585',
  'rgba(255, 69, 0, 0.68)',
  'rgb(255, 120, 0)',
  'hsv(51, 100, 98)',
  'hsva(120, 40, 94, 0.5)',
  'hsl(181, 100%, 37%)',
  'hsla(209, 100%, 56%, 0.73)',
  '#c7158577',
])

// switch开关的change事件进行暗黑模式的切换
const changeDark = () => {
  // 获取HTML根节点
  let html = document.documentElement;
  // 判断HTML标签是否又类名dark
  dark.value ? html.className = 'dark' : html.className = '';
  console.log(html)
}

const handleDrawer = () => {
  dialog.value = true
}

// 主题颜色设置
const setColor = () => {
  const html = document.documentElement;
  html.style.setProperty('--el-color-primary', color.value)
}
</script>